{extend name="layout/layout" /}

{block name="style"}
	<style>
		.goods-list{
			background: #fff;
		}

		.goods-list .item{
			border-bottom: 1px solid #eee;
			display: flex;
		}

		.goods-list .item .goods-img{
			width: 120px;
			height: 120px;
			text-align: center;
		}

		.goods-list .goods-info{
			padding: 10px;
			flex: 1;
		}

		.success-number{
			float: right;
		}

		.btn-box a{
			background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
			color: #fff;
			padding: 5px 15px;
			font-size: 10px;
			border-radius: 3px;
		}

		.progressbar{
			background: #FDF2B6;
			color: #9E6B2B;
			padding: 0 10px;
			height: 22px;
			border-radius: 11px;
			line-height: 22px;
			position: relative;
			width: 150px;
		}

		.progressbar .bg{
			position: absolute;
			left: 0;
			top: 0;
			height: 22px;
			border-radius: 11px;
			line-height: 22px;
			background: #FEE801;
		}

		.progressbar div{
			font-size: 10px;
		}

		.progressbar .info{
			position: absolute;
			left: 0;
			width: 100%;
			padding: 0 10px;
			z-index: 20;
		}

		.progressbar-box{
			padding: 10px 0;
		}

		.time-list{
			height: 55px;
			padding: 10px 0;
			background: #3E3D39;
			color: #fff;
		}

		.time-list .mui-control-item{
			padding: 0 20px;
		}

		.time-list .mui-control-item>div{
			font-size: 12px;
			padding: 0 20px;
		}

		#slider.mui-fullscreen{
			position: relative;
			top: 0px;
		}

		#slider .mui-control-item{
			line-height: 20px;
		}

		#slider .mui-active{
			color: #FEF5CA;
		}
		#slider .mui-active .time{
			background: #FEF5CA;
			color: #12120E;
			border-radius: 10px;
		}
	</style>
{/block}

{block name="main"}
	<div class="spike-goods" id="spikeGoods"  v-cloak>
		<div class="box">
			<div class="time-list" v-if="list.length > 0">
				<div id="slider" class="mui-slider mui-fullscreen">
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<div class="mui-control-item" @tap="changeTime(index)" :class="time.active == 1?'mui-active':''" v-for="(time, index) in list">
								<div class="time">{{time.time}}</div>	
								<div class="title">{{time.name}}</div>
							</div>
						</div>
					</div>
	            </div>

			</div>
			<div class="goods-list" v-if="list[index]['goods'].length > 0">
				<div class="item" v-for="goods in list[index]['goods']">

					<div class="goods-img">
						<img :src="goods.original_image" class="img-responsive" alt="">
					</div>
					<div class="goods-info">
						<div class="goods-name ellipsis-2">{{goods.goods_name}}</div>

						<div class="progressbar-box">
							<div class="progressbar">
								<div class="bg" :style="'width:'+goods.progressbar+'%'"></div>
								<div class="info">
									<div class="mui-pull-left">{{goods.progressbar > 90?'即将售馨':'已抢'+ goods.buy_number}}</div>
									<div class="mui-pull-right">{{goods.progressbar}}%</div>
									<div class="mui-clearfix"></div>
								</div>
							</div>
						</div>

						<div class="price text-theme">
							<b>￥{{goods.group_price}}</b> 
							<del class="text-gray"><small>￥{{goods.shop_price}}</small></del>
						</div>
						<div class="btn-box mui-text-right" @tap="toDetail(goods)">
							<a >马上抢</a>
						</div>
					</div>
				</div>
			</div>

			<div class="no-data" v-else>没有相关商品</div>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#spikeGoods",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	indexVue.goodsList = [];
		      	indexVue.page = 1;
		      	indexVue.nextPage = false;
		      	// mui('#pullup-container').pullRefresh().refresh(true);

		      	indexVue.getGoods();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:false,//可选,默认false.自动上拉加载一次
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	indexVue.getGoods();
		      	this.endPullupToRefresh(indexVue.list[indexVue.index]['nextPage']);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});
		var indexVue = new Vue({
			el:'.spike-goods',
			data: {
				list: [
					{
						goods:[]
					}
				],
				date_time: '',
				index: 0,
			},
			mounted: function(){
				this.getTimes();
			},
			methods: {
				getTimes: function() {
					var that = this;
					var keyword = this.keyword;
					console.log(keyword);
					var url =  'goods/spikeTime';
					request(that, {'url': url, 'data': {}}, function(res){
						if(res.code == 200) {
							if(res.data) {
								res.data.forEach(function(item, index) {
									if(item.active == 1) {
										that.index = index;
									}
									item.page = 1;
									item.nextPage = false;
								})

								
							}
							that.list = res.data;
							if(res.data) {
								that.getGoods();
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},

				//获取商品列表
				getGoods: function(){
					var that = this;
					var keyword = this.keyword;
					console.log(keyword);
					var url =  'goods/spikeGoods';
					var page = that.list[that.index]['page'];
					request(that, {'url': url, 'data': {'page': page, 'date_time': that.list[that.index]['time']}}, function(res){
						if(res.code == 200) {
							that.list[that.index]['goods'] = that.list[that.index]['goods'].concat(res.data);
			
							if(res.data.length < 20) {
								that.list[that.index]['nextPage'] = true;
							}
							that.list[that.index]['page']++;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				toDetail: function(goods) {
					var status = parseInt(goods.status);
					if(status != 1) {
						mui.toast('活动未开始');return;
					}
					location.href = '/mobile/goods/detail/id/'+goods.goods_id;
				},

				//选择时间
				changeTime: function(index) {
					this.index = index;
					if(this.list[this.index]['goods'].length <= 0) {
						this.getGoods();
					}
				}
			}
		});
	</script>
{/block}